<template>
  <div class="xiecheng">
    <div class="admin_main_block">
      <div class="admin_main_block_top">
        <div class="admin_main_block_left">
          <div>{{ i18n('demand.view') }}</div>
        </div>

        <div class="admin_main_block_right">
          <div class="mr10">
            <el-button icon="Back" @click="router.go(-1)">
              {{ i18n('common.return') }}
            </el-button>
          </div>
        </div>
      </div>

      <div class="admin_form_main">
        <el-form ref="formRef" :model="dataForm" label-width="100">
          <el-card class="box-card" shadow="never">
            <template v-slot:header>
              <div class="clearfix">
                <span>{{ i18n('common.basic_info') }}</span>
              </div>
            </template>
            <div class="text item">
              <el-form-item :label="i18n('demand.client_id')">
                {{ dataForm.client_name }}
              </el-form-item>

              <el-form-item :label="i18n('demand.demand_type')">
                {{ dataForm.demand_type }}
              </el-form-item>

              <el-form-item :label="i18n('demand.demand_time')">
                {{ dataForm.demand_time }}
              </el-form-item>

              <el-form-item :label="i18n('demand.money')">
                {{ dataForm.money }}元
              </el-form-item>

              <el-form-item :label="i18n('demand.contact_id')">
                {{ dataForm.contact_name }}
              </el-form-item>

              <el-form-item :label="i18n('demand.description')">
                <span style="word-break: break-word;">{{ dataForm.description }}</span>
              </el-form-item>

              <el-form-item :label="i18n('demand.demand_status')">
                {{ dataForm.demand_status }}
              </el-form-item>
            </div>
          </el-card>

          <el-card class="box-card mt10" shadow="never">
            <template v-slot:header>
              <div class="clearfix">
                <span>{{ i18n('demand.user_info') }}</span>
              </div>
            </template>
            <div class="text item">
              <el-form-item :label="i18n('user.nickname')">
                <dl class="table_dl" style="width: 300px;">
                  <dt>
                    <el-avatar :size="45" :src="dataForm.user_avatar" />
                  </dt>
                  <dd class="table_dl_dd_all_30">
                    {{ dataForm.user_name }}
                  </dd>
                  <dd class="table_dl_dd_all_16_gray">
                    {{ dataForm.user_position }}
                  </dd>
                </dl>
              </el-form-item>

              <el-form-item :label="i18n('common.create_time')">
                {{ dataForm.create_time }}
              </el-form-item>

              <el-form-item :label="i18n('common.update_time')">
                {{ dataForm.update_time }}
              </el-form-item>
            </div>
          </el-card>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup name="demand-view">
  import { useBase } from "@/hooks/base/useBase"
  import { useForm } from "@/hooks/form/useForm"

  const { router, query, i18n, isAuth } = useBase()

  const model = ref('business/demand')

  const dataForm = reactive({
    id: 0,
    client_name: '',
    contact_name: '',
    user_name: '',
    user_avatar: '',
    user_position: '',
    demand_type: '',
    demand_time: '',
    money: 0,
    description: '',
    sort: 0,
    is_recommend: '',
    is_hidden: '',
    status: '',
    create_time: '',
    update_time: '',
  })

  const { formRef } = useForm(model.value, dataForm)

  const init = (form) => {
    dataForm.id = query.id || 0

    nextTick(() => {
      form.value.resetFields()
      if (dataForm.id) {
        $http({
          url: $http.adornUrl(`/${model.value}/view/${dataForm.id}`),
          method: 'get',
          params: $http.adornParams({}),
        }).then(({ data }) => {
          if (data && data.status === 200) {
            dataForm.id = data.data.id
            dataForm.user_id = data.data.user_id
            dataForm.client_name = data.data.client.name || ''
            dataForm.contact_name = data.data.contact.name || ''
            dataForm.user_name = data.data.user.nickname || ''
            dataForm.user_avatar = data.data.user.avatar || ''
            dataForm.user_position = data.data.user.detail.position || ''
            dataForm.demand_type = data.data.demand_type.text
            dataForm.demand_time = data.data.demand_time
            dataForm.demand_status = data.data.demand_status.text
            dataForm.money = data.data.money
            dataForm.description = data.data.description
            dataForm.sort = data.data.sort
            dataForm.create_time = data.data.create_time_text
            dataForm.update_time = data.data.update_time_text
            dataForm.is_recommend = data.data.is_recommend.text
            dataForm.is_hidden = data.data.is_hidden.text
          }
        })
      }
    })
  }

  onMounted(() => {
    init(formRef)
  })
</script>
